<template>
		<view class="level-item-container">
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" :show-default-loading-more-text="false"	>
				<template #top>
					<view class="" >
						<u-navbar :border-bottom="false" :background="{background:'#fff'}" :title="templateName" :title-size="36" :title-bold="true" :title-color="textColor" >
						</u-navbar>
						<view class="shop-header">
							<view class="u-p-36 u-flex">
								<image :src="shopLogo||'/static/logo.png'" class="shop-logo"></image>
								<view class="u-m-l-20">
									<view class="shop-name u-m-b-10">{{shopName}}</view>
									<view class="u-font-26" style="color: #999;">
										已签约<text class="u-font-32 u-text-bold">{{totalCount}}</text>个单品
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<view class="history-container u-p-l-35 u-p-r-35">
					<view class="" v-for="(item, index) in dataList" :key="item.id" >
						<view class="history-item u-p-t-30 u-p-b-30  u-flex ">
							<image :src="item.url" mode="" style="display:block;width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 10rpx;"></image>
							<view class="" style="flex: 1;overflow: hidden;">
								<view class="u-font-30 u-line-2" style="font-weight: 500;">{{item.name}}</view>
								<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
									{{item.specification}}
								</view>
							</view>
							<view class="" style="width: 200rpx;">
								<view class="u-text-right" >
									<view class=" u-font-32" style="color: #ff551a;" >
										￥{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				templateId:"",
				searchValue:'',
				templateName:'',
				totalCount:0,
				shopName:'',
				shopLogo:'',
			}
		},
		onLoad(options) {
			this.templateName = options.name;
			this.templateId = options.templateId;
			this.shopName = options.shopName;
			this.shopLogo = options.shopLogo;
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		methods: {
			reloadFn(){
				this.$refs.paging.reload();
			},
			async queryList(pageNo, pageSize) {
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopLevelId:this.templateId,
					shopId:this.storeShop.id,
					useLevelPrice:true
				}
				if(this.searchValue != ''){
					params.name = this.searchValue
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.post('api/BrandOwner/GetItemsByPage',params );
				uni.hideLoading({})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
					this.totalCount = res.data.totalCount;
				}else{
					this.$refs.paging.complete(false);
				}
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css'; 
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.level-item-container {
		height: 100%;
		.shop-header{ 
			background: #fff;
			overflow: hidden;
			border-bottom: 20rpx solid #f8f8f8;
			// margin-bottom: 20rpx;
			.shop-logo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				display:block;
			}
			.shop-name{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			
		}
		.history-container{
			background-color: #fff;
		}
	}
</style>
